<template>
  <Card
    :tab-list="tabListTitle"
    v-bind="$attrs"
    :active-tab-key="activeKey"
    @tab-change="onTabChange"
  >
    <BasicTable @register="registerTable" />
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { dynamicInfoItems } from '@/views/dashboard/workbench/components/data';

  function onTabChange(key) {
    activeKey.value = key;
  }
  const activeKey = ref('1');
  const tabListTitle = [
    {
      key: '1',
      tab: '缺项统计',
    },
    {
      key: '2',
      tab: '健康体检',
    },
    {
      key: '3',
      tab: '儿童',
    },
    {
      key: '4',
      tab: '孕妇',
    },
    {
      key: '5',
      tab: '老年人',
    },
    {
      key: '6',
      tab: '疾病管理',
    },
  ];
  const getBasicColumns = [
    {
      title: 'id',
      dataIndex: 'id',
      defaultHidden: true,
    },
    {
      title: '缺项名称',
      dataIndex: 'name',
      fixed: 'left',
      width: 150,
    },
    {
      title: '缺项率',
      dataIndex: 'value',
      width: 180,
    },
  ];
  const [registerTable] = useTable({
    dataSource: dynamicInfoItems,
    columns: getBasicColumns,
    useSearchForm: false,
    showTableSetting: false,
    showIndexColumn: false,
    rowKey: 'id',
    pagination: false,
    clickToRowSelect: false,
  });
</script>
